<template>
  <div>
    <div
      class="server-package"
      :class="{choose: currentType === 'vacuum'}"
      @click="chooseType('vacuum')"
    >
      <div class="package-box">
        <div class="package-title">真空包装</div>
        <div class="package-price">{{vacuum}}元</div>
      </div>

    </div>

    <div
      class="server-package"
      @click="chooseType('leatheroid')"
      :class="{choose: currentType === 'leatheroid'}"
    >
      <div class="package-box">
        <div class="package-title">纸箱包装</div>
        <div class="package-price">{{ leatheroid }}元</div>
      </div>
    </div>

    <div
      class="server-package"
      @click="chooseType('special')"
      :class="{choose: currentType === 'special'}"
    >
      <div class="package-box">
        <div class="package-title">特殊包装袋</div>
        <div class="package-price">{{ special }}元</div>
      </div>
    </div>

    <div class="tips-1">
      <p style="color: #AAAAAA">根据您的需求选择合适的包装服务，如不需要请忽略</p>
      <p style="color: #F5222D">此服务为额外增值服务，选择后本次贴单将收取的额外的服务费</p>
    </div>
    <div class="tips-2"></div>
  </div>

</template>

<script>
export default {
  name: "stickerPackage",
  props:{
    packageType:{
      type: String,
      default: '',
    }
  },
  watch:{
    packageType(val){
      this.currentType = val
    }
  },
  created() {
    this.getStoreParams()
    this.currentType = this.packageType
  },
  data(){
    return {
      vacuum: 0,
      leatheroid: 0,
      special: 0,
      currentType: '',
    }
  },
  methods:{
    // 获取包装的服务费参数
    getStoreParams(){
      this.vacuum = this.$store.getters.vacuum
      this.leatheroid = this.$store.getters.leatheroid
      this.special = this.$store.getters.special
    },
    // 选择类型
    chooseType(type){
      if(this.currentType === type){
        this.currentType = ''
      }else{
        this.currentType = type
      }
      this.$emit('choosePackageType',this.currentType)
      this.$emit('input',this.currentType)
    }
  }

}
</script>

<style scoped lang="scss">
.server-package{
  width: 100px;
  height: 80px;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  font-size: 13px;
  .package-box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .package-title{
    color: #999999;
  }
  .package-price{
    color: #ed6a0d;
  }
}
.choose{
  border: 1px solid #0079fe;
  .package-price{
    color: #0079fe;
  }
  .package-title{
    color: #0079fe;
  }
}
.tips-1{
  p{
    margin: 0;
    padding: 0;
  }
}
</style>
